<template>
	<view class="peolist">
		<view class="help-pubuBox">
			<u-search placeholder="请输入人员姓名" :clearabled="true" v-model="title" @change="change" @search="chaxun"
				@custom="chaxun" shape="square" actionText="搜索" :actionStyle="actionStyle"></u-search>
		</view>
		<view class="search-list">
			<u-index-list :index-list="indexList" :inactiveColor="inactiveColor" :activeColor="activeColor">
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor> -->
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<!-- <u-index-anchor :text="indexList[index]" bgColor="#f2f2f2"></u-index-anchor> -->
						<!-- #endif -->
						<view class="list-cell" v-for="(cell, i) in item" :key="cell.id"
							@click="changeSelectItem(item[i])">
							<view class="iconfont"
								:class="[isSelect(item[i].id)?'icon-app-danxuangouxuan select-bg':'icon-app-danxuanweixuan unselect-bg']">
							</view>
							<view class="left-icon">
								<image v-if="cell.portrait" :src="cell.portrait"></image>
								<view v-if="!cell.portrait" class="defalut-icon">{{getName(cell.realName)}}</view>
								<view class="txt-content">
									<text class="txt1">{{cell.realName}}</text><text
										class="txt2">{{cell.positionName}}</text>
								</view>
							</view>
						</view>
					</u-index-item>
				</template>
				<view class="empty-data" v-if="itemArr.length==0">
					<u-empty mode="data" :marginTop="100" text="暂无数据"></u-empty>
				</view>
			</u-index-list>
		</view>
		<view class="bx-bottom">
			<view class="btn" @click="submit">保存</view>
		</view>
		<u-loading-page color="#fff" bgColor='rgba(0,0,0,0.3)' :loading="loading" loading-text="已选择人员,正在跳转..."></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userid:'',
				inactiveColor: "#000000",
				activeColor: "rgba(15, 83, 172, 1)",
				title: "",
				actionStyle: {
					color: '#fff',
					background: 'rgba(15, 83, 172, 1)',
					padding: '10rpx',
					borderRadius: '8rpx'
				},
				page: 1,
				comList: [],
				directorType: '',
				indexList: [],
				itemArr: [],
				selectItem: [],
				loading:false
			}
		},
		onLoad(option) {
			uni.$on('update', (data) => {
				console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
			})
			this.directorType = option.type||1;
			console.log(option.peopleList,'option.peopleList')
			if(option.peopleList&&JSON.parse(option.peopleList).length>0){
				this.selectItem=JSON.parse(option.peopleList)||[]
			}
			
			this.userid=option.userid
			this.getPeopleList()
		},
		methods: {
			change(v) {
				this.title = v
			},
			chaxun() {
				const that = this
				let params = {
					directorType: '',
					keyword: ''
				}
				params.directorType = +this.directorType
				params.keyword = this.title
				this.itemArr = [];
				//调用接口查询
				uni.$u.http.post(`/base/mobile/userDirector/getDirectorListByType`, params).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						if(res.data.length>0){
							that.itemArr.push(res.data)
						}
					}
				}).catch(err => {})
			},
			isSelect(id){
				const type = this.selectItem.find(item=>item.id===id)
				if(type){
					return true
				}else{
					return false
				}
			},
			changeSelectItem(item) {
				// this.loading=true
				//这里判断之前是否选中过 //如果选中过就去掉否则就添加
				if(this.isSelect(item.id)){
					//去掉
					this.selectItem=this.selectItem.filter(i=>{
						if(i.id!==item.id){
							return i
						}
					})
				}else{
					//添加
					this.selectItem.push(item)
				}
				console.log(this.selectItem)
			},
			getPeopleList() {
				this.itemArr = [];
				uni.$u.http.get(`/base/mobile/userDirector/getDirectorList/${this.directorType}`).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						let arr = res.data.filter(item=>item.id!==this.userid)
						this.itemArr.push(arr);
					}
				}).catch(err => {})
			},
			getName(name) {
				let dd = name?.substring(0, 1)
				return dd;
			},
			submit(){
				
				if(this.selectItem.length<1){
					uni.$u.toast('请选择人员')
					return false
				}
				if(this.selectItem.length>4){
					uni.$u.toast('最多只能添加4名人员')
					return false
				}
				
				this.loading=true
				console.log(this.selectItem,'this.selectItem')
				setTimeout(() => {
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					if (this.directorType == 1) { 
						prevPage.$vm.wbpeopleList = this.selectItem; //修改上一页data里面的地址
					}
					uni.navigateBack({
						delta: 1 //返回层数，2则上上页
					});
					this.loading=false
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.peolist{
		padding-bottom: 220rpx;
	}
	.bx-bottom {
		position: fixed;
		bottom:0;
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 60rpx 0;
	
		.btn {
			width: 90%;
			height: 92rpx;
			border-radius: 12rpx;
			background: rgba(15, 83, 172, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
		}
	}
	.help-pubuBox {
		padding: 22rpx;
		background: #fff;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 9;
		/*  #ifdef H5 */
		top: 90rpx;
		/*  #endif */

		top: 0;

	}

	.search-list {
		background: #fff;
		margin-top: 130rpx;
		
	}

	.list-cell {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx 24rpx;
		border-bottom: 1px solid #f2fef2;

		.left-icon {
			display: flex;
			margin-left: 20rpx;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
			}

			.defalut-icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(15, 83, 172, 1);
				color: #fff;
			}

			.txt-content {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.txt1 {
					font-size: 34rpx;
					color: #000000;
					padding-bottom: 10rpx;
				}

				.txt2 {
					font-size: 28rpx;
					color: #8c8c8c;
				}
			}
		}

		.unselect-bg {
			margin-right: 20rpx;
			color: #f1f1f1;
			font-size: 48rpx;
		}

		.select-bg {
			margin-right: 20rpx;
			color: rgba(15, 83, 172, 1);
			font-size: 48rpx;
		}
	}
</style>